<template>
  <div class="home">
    <!-- 轮播区域 -->
    <home-swiper :key="dataList.length">
      <home-swiper-item v-for="data in dataList" :key="data" class="homeswiperitem">
        <img :src="data">
      </home-swiper-item>
    </home-swiper>

    <!-- 电影导航 -->
    <home-header toRouter1='/home/hot' toRouter2='/home/premie' class="sticky">
      <span slot="rName1">正在热映</span>
      <span slot="rName2">即将上映</span>
    </home-header>

    <router-view></router-view>
  </div>
</template>

<script>
import HomeSwiper from '@/components/homes/HomeSwiper'
import HomeSwiperItem from '@/components/homes/HomeSwiperItem'
import HomeHeader from '@/components/homes/HomeHeader'
import swiperImg01 from '@/assets/chijingxiuyi.jpeg'
import swiperImg02 from '@/assets/heiyizuzhi.jpeg'
export default {
  data () {
    return {
      dataList: [
        swiperImg01,
        swiperImg02
      ]
    }
  },
  mounted () {

  },
  components: {
    HomeSwiper,
    HomeSwiperItem,
    HomeHeader
  }
}
</script>
<style scoped lang="scss">
.homeswiperitem{
  img{
    width: 100%;
    height: 25rem;
  };
}
.sticky{
  position:sticky;
  top: 0;
  background: white;
  z-index: 100;
}

</style>
